<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
    <script src="../src/data/trace/trace1/trace.js"></script>
	</head>
	<body>
		<div id="map"></div>
    <div class="input-card">
      <button onclick="start()">开始</button>
      <button onclick="stop()">停止</button>
      <button onclick="pause()">暂停</button>
    </div>
		<script type="text/javascript"  id="my_script">
      // 引入js文件 src="../src/data/trace/trace1/trace.js"
      
      var map = L.map('map', {
        center: [38.8631169, 9.3708919],
        zoom: 5,
        crs: L.CRS.EPSG3857,
        layers: [
          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
        ]
      });
      // 轨迹点
      var path = [
        [39.51, 7.3708919],
        [37.77, 8.54235],
        [34.04, 9.52532],
        [36.04, 10.52532],
        [40.04, 14.52532],
        [38.04, 16.52532]
      ];
      var polyline = L.polyline(path, {color: 'red'}).addTo(map);

      var myIcon = L.icon({
        iconUrl: '../src/images/car.png',
        iconSize: [24, 24]
      });
      // 设置小车的icon与路劲path
      setCarAndPath(myIcon, path);
		</script>
	</body>
</html>
